@import '~@kdcloudjs/kdesign/dist/kdesign-complete.less';

.header {
  position: relative;
  display: flex;
  padding-left: 16px;

  .brand {
    flex: auto;
    display: flex;

    .logo {
      margin-right: 50px;
    }

    .nav {
      flex: auto;
      display: flex;
      height: 100%;

      li {
        position: relative;
        display: inline-block;
        min-width: 80px;
        padding: 0 24px;
        font-size: 16px;
        color: #212121;
        cursor: pointer;

        &:hover {
          color: @color-theme;
          background-color: #f2f6ff;
        }

        &.active {
          color: #fff;
          background-color: @color-theme;
        }
      }
    }
  }

  .tools {
    justify-content: flex-end;
  }
}
